import { Component } from 'react'
import { View, ScrollView, Image } from '@tarojs/components'
import RecommandGoods from './components/recommand-goods'
import Global from '@/src/lib/global'
import Banner from '@/src/components/banner'
import GroupEnter from './components/group-enter'
// import VIPCoupon from './components/vip-coupon'

import Api from '@/src/lib/api/api'
import HomeIndexModel from '@/src/lib/models/home_index_model'
import PageWarpper, { PageWarpperContext } from '@/src/components/page-warpper'


import ServiceBtn from '@/src/components/service-btn'
import Placeholder from '@/src/components/placeholder'
import Taro from '@tarojs/taro'
import CheckModel from '@/src/lib/models/check_model'
import NewUserPopup from './components/new-user-popup'
import Page from '@/src/components/page';
import { MovableArea, MovableView } from '@tarojs/components';

import './index.scss'


interface HomeProps {
}

interface HomeState {
    dataModel?: HomeIndexModel,
    newUserCheckModel?: CheckModel
}

class Home extends Component<HomeProps, HomeState> {
    static contextType = PageWarpperContext
    requestCount = 0

    constructor(props: HomeProps) {
        super(props)
        this.state = {
        }
    }


    onLoad() {
        this.newUserCheck()
    }

    componentDidShow() {
        this.requestData()
    }

    newUserCheck = () => {
        Taro.login().then(ret => {
            console.log(ret)
            if (ret.code) {
                Api.getCheck({ code: ret.code }).then(res => {
                    // console.log('ssssss',res)
                    if (!Api.handleResponse(res)) {

                        this.setState({
                            newUserCheckModel: undefined
                        })
                        return
                    }
                    // if()


                    this.setState({
                        newUserCheckModel: res?.data
                    })

                }).catch(err => {
                    console.log(err)
                })
            }
        }).catch(err => {
            console.log(err)
        })
    }

    requestData = () => {
        this.requestCount += 1
        // - 加载首页信息
        Api.homeIndex().then((res) => {
            if (!Api.handleResponse(res)) {
                return
            }

            this.setState({ dataModel: res!.data })

        }).catch((error) => {
            console.log(error)
        })

    }

    /**
     * banner 被点击
     */
    onBannerClick = (index: number) => {
        const goodsId = this.state.dataModel?.slidelist[index].goodsid
        const { loginCompentRef } = this.context

        if (!Global.isLogin()) {
            loginCompentRef.current.show()
            return
        }

        if (goodsId) {
            Global.navigateTo("/pages/goodsdetail/index", {
                // package: "subpackages",
                params: {
                    id: goodsId
                }
            })
        }
    }

    render() {
        const { dataModel, newUserCheckModel } = this.state
        const bannerImgs = dataModel?.slidelist.map(({ pic }) => pic)

        if (!dataModel && this.requestCount > 0) {
            return <Placeholder desc="几甜酱已经努力为您加载了o(╥﹏╥)o" button="重新加载" onBtnClick={() => this.requestData()} />
        }

        console.log('newUserCheckModel', newUserCheckModel)
        let newUserPopup
        // 

        if (newUserCheckModel && newUserCheckModel.coupon_id) {
            newUserPopup = <NewUserPopup model={newUserCheckModel} closeCallback={() => {
                this.setState({ newUserCheckModel: undefined })
            }} />
        }


        return (
            <Page isHiddenNavbar>



                <MovableArea className='home'>

                    <ScrollView className='scrollview' scrollY enhanced showScrollbar={false}>

                        {/* banner */}
                        <View className="banner-container">
                            <Banner
                                className="banner"
                                items={bannerImgs}
                                onClick={this.onBannerClick}
                                autoplay
                            />

                            <Image className="divider" src="http://r.punkyangsheng.com/xcx/img/images/divider@3x.png"></Image>
                        </View>

                        {/* 群聊入口 */}
                        <GroupEnter className="group" model={dataModel} />

                        {/* VIP优惠券 */}
                        {/* <VIPCoupon className="coupon" models={dataModel?.couponlist ?? []} /> */}

                        {/* 推荐商品 */}
                        <RecommandGoods className="recommand" models={dataModel?.goodslist} />

                        {/* <View className="bottms">
                            <Image src="/resources/images/test.jpg"></Image>
                        </View> */}

                        {/* <Divider color="transparent" width={30}/> */}

                    </ScrollView>
                    <MovableView x="300" y="550" direction="all" className="movab1">
                        <ServiceBtn />
                    </MovableView>

                    {newUserPopup}

                </MovableArea>

            </Page>
        )
    }
}

export default PageWarpper()(Home)
